<template>
    <div class="question-write-container animate__animated animate__fadeIn">
      <!-- 标题输入区域 -->
      <div class="input-section">
        <input
          v-model="questionTitle"
          type="text"
          placeholder="请输入问题标题"
          class="title-input animate__animated animate__fadeInDown"
        />
      </div>
  
      <!-- 编辑器区域 -->
      <div class="editor-wrapper animate__animated animate__fadeInUp animate__delay-2s">
        <Toolbar
          style="border-bottom: 1px solid #dcdfe6"
          :editor="editorRef"
          :defaultConfig="toolbarConfig"
          :mode="mode"
        />
        <Editor
          style="height: calc(100vh - 200px); overflow-y: hidden;"
          v-model="valueHtml"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="handleCreated"
        />
      </div>
  
      <!-- 操作按钮区域 -->
      <div class="action-buttons animate__animated animate__fadeInUp animate__delay-3s">
        <button class="action-button submit-button" @click="handleSubmit">
          <t-icon name="send" /> 提问
        </button>
      </div>
    </div>
  </template>
  
  <script setup>
  import '@wangeditor/editor/dist/css/style.css';
  import 'animate.css';
  import { onBeforeUnmount, ref, shallowRef } from 'vue';
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
  import { uploadImage } from '@/api/uploadApi';
  import { uploadQuestion } from '@/api/questionApi';
  import { ElMessage } from 'element-plus';
  import { useUserStore } from '@/stores/userStore';
  import { storeToRefs } from 'pinia';
  
  const userStore = useUserStore();
  const { profile } = storeToRefs(userStore);
  
  // 编辑器实例，必须用 shallowRef
  const editorRef = shallowRef();
  
  // 问题标题
  const questionTitle = ref('');
  
  // 内容 HTML
  const valueHtml = ref('');
  
  const toolbarConfig = {};
  const editorConfig = {
    placeholder: '请输入详细描述...'
  };
  
  editorConfig.MENU_CONF = {
    uploadImage: {
      customUpload: async (file, insertFn) => {
        const formData = new FormData();
        formData.append('file', file);
  
        try {
          const response = await uploadImage(formData);
          if (response.errno === 0) {
            insertFn(response.data.url);
            ElMessage({
              message: "图片上传成功",
              type: 'success',
            });
          } else {
            ElMessage({
              message: "图片上传失败",
              type: 'error',
            });
          }
        } catch (error) {
          console.error('图片上传出错:', error);
          ElMessage({
            message: "图片上传出错",
            type: 'error',
          });
        }
      }
    }
  };
  
  // 组件销毁时，销毁编辑器
  onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) return;
    editor.destroy();
  });
  
  const handleCreated = (editor) => {
    editorRef.value = editor;
  };
  
  // 提交问题
  const handleSubmit = async () => {
    if (!questionTitle.value || !valueHtml.value) {
      ElMessage.warning('请完善问题内容');
      return;
    }
  
    try {
      const data = {
        title: questionTitle.value,
        userId: profile.value.id,
        content: valueHtml.value,
        // 根据实际需求添加其他字段
      };
      const response = await uploadQuestion(data);
      ElMessage.success('问题提交成功');
      // 提交成功后可跳转或清空表单
      questionTitle.value = '';
      valueHtml.value = '';
    } catch (error) {
      console.error('问题提交失败:', error);
      ElMessage.error('问题提交失败');
    }
  };
  
  const mode = 'default';
  </script>
  
  <style scoped>
  .question-write-container {
    height: 100%;
    padding: 20px;
    background-color: #ffffff;
  }
  
  .input-section {
    margin-bottom: 20px;
  }
  
  .title-input {
    width: 100%;
    padding: 12px 15px;
    font-size: 18px;
    font-weight: 500;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    outline: none;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
  }
  
  .title-input:focus {
    border-color: #409eff;
    background-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
  }
  
  .editor-wrapper {
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
  }
  
  .action-buttons {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    padding: 10px 0;
  }
  
  .action-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .submit-button {
    background-color: #409eff;
    color: white;
  }
  
  .submit-button:hover {
    background-color: #66b1ff;
  }
  
  .action-button:active {
    transform: scale(0.98);
  }
  </style>